import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import EChart from '@kuiper-components/echarts';

import ChartTitle from '../../../../../components/ChartTitle';
import moment from 'moment';
import { datetime } from '../../../../../../common/formatter';
import s from './style.module.css';
const emptyLineData = [];
for (let i = 5; i >= 1; i--) {
	emptyLineData.push([
		moment().subtract(i, 'days').startOf('day').toDate(),
		0
	]);
}
function Availability({ className, resultNumbers, dateStr, jobId }) {
	const [myChart, setChart] = React.useState(undefined);
	const lineOption = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
			},
			formatter: value => {
				let html = `<div><p>${moment(value[0].value[0]).format(
					'YYYY-MM-DD HH:mm:ss'
				)}</p>`;
				value.map(item => {
					html += `<div>`;
					html += `<div style="width: 8px;height: 8px;border-radius: 50%;background-color: ${item.color};margin-right: 5px;display: inline-block;vertical-align:middle;"></div>`;
					html += `<div style="display:inline-block;vertical-align:middle;">${item.seriesName} ${item.value[1]}%</div>`;
					html += `</div>`;
				});
				html += `</div>`;
				return html;
			},
			backgroundColor: '#fff',
			textStyle: '#696C78',
			extraCssText:
				'width: max-content;max-width: 20rem;padding:1rem;line-height:1rem;margin: 0 auto;box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.2);',
		},
		xAxis: {
			type: 'time',
			boundaryGap: false,
			splitLine: { show: false },
			axisLine: { lineStyle: { color: 'transparent' }, show: false },
			axisTick: {
				show: false
			},
			axisLabel: {
				margin: 20,
				align: 'left',
			},
			maxInterval: 3600 * 24 * 1000,
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				show: true,
				interval: 'auto',
				formatter: '{value} %',
			},
			show: true,
			axisLine: { show: false },
			axisTick: { lineStyle: { opacity: 0 } },
			splitLine: { lineStyle: { color: '#F7F9FC' } },
		},
		textStyle: { color: '#696C78', fontSize: 12 },
		series: [
			{
				name: '可用率',
				type: 'line',
				smooth: false,
				smoothMonotone: 'x',
				showSymbol: false,
				lineStyle: {
					width: 2,
				},
			},
		],
	};
	let lineData = resultNumbers?.map(item => {
		const val = item.normalNodeCount / item.totalNodeCount;
		return [item.datetime, val * 100];
	});
	if (!resultNumbers.length) {
		lineData = emptyLineData
		lineOption.tooltip.show = false
		lineOption.series[0].lineStyle.width = 0
		lineOption.yAxis.splitNumber = 5
		lineOption.yAxis.max = 100
		lineOption.yAxis.min = 0
	}

	lineOption.series[0].data = lineData;

	// if (lineData.length === 0) {
	// 	lineOption.series[0].data = [[new Date().toISOString(), 0]];
	// }
	// React.useEffect(() => {}, [resultNumbers]);
	const getChart = e => {
		setChart(e);
	};

	if (myChart) {
		myChart.clear()
		myChart.setOption(lineOption);
	}

	return (
		<div className={cn(className, s.availability)}>
			<ChartTitle className={s.title}>可用率</ChartTitle>
			<EChart key={dateStr} className={s.chart} option={lineOption} getInstance={getChart} />
		</div>
	);
}

Availability.propTypes = {
	className: PropTypes.string,
	dateStr: PropTypes.string,
	resultNumbers: PropTypes.arrayOf(
		PropTypes.shape({
			datetime: PropTypes.date,
			normalNodeCount: PropTypes.number,
			totalNodeCount: PropTypes.number,
		})
	),
};
Availability.defaultProps = {
	className: '',
};

export default Availability;
